<template>
  <div class="box">
    <div class="box-header box-header-panel">
      <i class="icon" :class="iconName"></i>
      <span class="title">{{ formName }}</span>
      <div class="box-extra">
        <button class="c-button icon-btn" @click="toggleBoxBody">
          <i class="icon" :class="iconArrowStyle"></i>
        </button>
      </div>
    </div>
    <div class="box-body" v-show="visible.boxBody">
      <div class="item">
        <Form ref="formDynamic" :model="formDynamic">
          <FormItem v-for="(item, index) in formDynamic.items" v-if="item.visible" :key="index">
            <Row :gutter="32">
              <Col span="8" v-if="item.label">
                <span class="label">{{ item.label }}</span>
              </Col>
              <Col span="8" v-if="item.queryLogic">
                <Select v-model="item.queryLogic">
                  <Option
                    v-for="(node, i) in queryLogicDict"
                    :value="node.value"
                    :key="node.name"
                  >{{ node.name }}</Option>
                </Select>
              </Col>
              <Col span="8">
                <Select v-model="item.queryCondition" @on-change="selectQueryCondition(item)">
                  <Option
                    v-for="(node, i) in queryConditionDict"
                    :value="node.value"
                    :key="node.name"
                  >{{ node.name }}</Option>
                </Select>
              </Col>
              <Col span="8" v-if="index == 0">
                <button class="form-reset" type="button" @click="resetForm">
                  <i class="icon icon-form-reset"></i>
                  <span class="text">重置</span>
                </button>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="16" v-if="!item.doubleInput">
                <Input v-model="item.queryKeyword" placeholder="请输入关键字" class="form-textbox"></Input>
              </Col>
              <Col span="16" v-if="item.doubleInput">
                <Row :gutter="6">
                  <Col span="10">
                    <Input v-model="item.queryMinKeyword" placeholder></Input>
                  </Col>
                  <Col span="4">
                    <span class="text">—</span>
                  </Col>
                  <Col span="10">
                    <Input v-model="item.queryMaxKeyword" placeholder></Input>
                  </Col>
                </Row>
              </Col>
              <Col span="4" v-if="item.index > 1">
                <button type="button" class="form-row-btn" @click="handleRemoveRow(item.index)">
                  <i class="icon icon-remove-row"></i>
                </button>
              </Col>
              <Col
                span="4"
                v-if="
                                    formDynamic.items.length <= 1 ||
                                    item.index > 1
                                "
              >
                <button type="button" @click="handleAddRow" class="form-row-btn">
                  <i class="icon icon-add-row"></i>
                </button>
              </Col>
            </Row>
          </FormItem>
        </Form>
      </div>
      <div class="item" style="position: relative">
        <button class="form-submit" @click="handleSubmit">检索</button>
      </div>
    </div>
  </div>
</template>

<script>
const ratio = JSON.parse(localStorage.ratio);

export default {
  name: "",
  data() {
    return {
      visible: {
        boxBody: false
      },
    //   queryConditionDef:'嘟嘟',
      iconArrowStyle: "icon-arrow-up",
      boxHeight: 36 * ratio, // 790
      index: 1,
      formDynamic: {
        items: [
          {
            queryCondition: "type",
            queryKeyword: null,
            visible: true,
            queryMinKeyword: null,
            queryMaxKeyword: null,
            index: 1,
            doubleInput: false,
            label: "检索条件",
            queryLogic: null
          }
        ]
      },
      queryConditions: [],
      queryLogicDict: [
        { name: "并且", value: "AND" },
        { name: "或者", value: "OR" },
        { name: "不包括", value: "NOT" }
      ],
      queryConditionDict: [
        {
          name: "种类",
          value: "type"
        },
        {
          name: "树高",
          value: "treeHeight"
        },
        {
          name: "胸径",
          value: "DBH"
        },
        {
          name: "冠幅",
          value: "canopy"
        },
        {
          name: "冠面积",
          value: "crownArea"
        },
        {
          name: "冠体积",
          value: "crownVolume"
        },
        {
          name: "ID",
          value: "ID"
        }
      ]
    };
  },
  props: {
    formName: {
      type: String
    },
    iconName: {
      type: String
    }
  },
  created(){
      this.iconArrowStyle = "icon-arrow-down";
  },
  methods: {
    toggleBoxBody(boxName) {
      this.visible.boxBody = !this.visible.boxBody;
      if (this.visible.boxBody) {
        this.iconArrowStyle = "icon-arrow-up";
        this.boxHeight = 395 * ratio;
      } else {
        this.iconArrowStyle = "icon-arrow-down";
        this.boxHeight = 36 * ratio;
      }
    },
    selectQueryCondition(item) {
      let node = this.formDynamic.items.find(e => {
        return e.index === item.index;
      });
      //选中树高/胸径/冠幅/冠面积/冠体积
      if (
        item.queryCondition === "treeHeight" ||
        item.queryCondition === "DBH" ||
        item.queryCondition === "canopy" ||
        item.queryCondition === "crownArea" ||
        item.queryCondition === "crownVolume"
      ) {
        node.doubleInput = true;
      } else {
        node.doubleInput = false;
      }
    },
    handleAddRow() {
      this.index++;
      this.formDynamic.items.push({
        index: this.index,
        queryCondition: "type",
        queryKeyword: null,
        visible: true,
        queryMinKeyword: null,
        queryMaxKeyword: null,
        doubleInput: false, 
        label: null,
        queryLogic: "AND"
      });
    },
    handleRemoveRow(index) {
      let item = this.formDynamic.items.find(e => {
        return e.index === index;
      });
      item.visible = false;
      this.formDynamic.items = this.formDynamic.items.filter(e => {
        return e.index !== index;
      });
    },
    resetForm() {
      this.formDynamic.items = [
        {
          queryCondition: "type",
          queryKeyword: "",
          visible: true,
          queryMinKeyword: null,
          queryMaxKeyword: null,
          index: 1,
          doubleInput: false,
          label: "检索条件",
          queryLogic: null
        }
      ];
    },
    handleSubmit() {
      this.$emit("on-query", this.formDynamic.items);
    }
  }
};
</script>

<style lang="" scoped>
</style>